<template>
  <div>
    <div class="svg_outer_css">
      <svg
        viewBox="5 0 150 100"
        xmlns="http://www.w3.org/2000/svg"
        xmlns:xlink="http://www.w3.org/1999/xlink"
        width="300px"
        height="200px"
      >
        <linearGradient
          id="myLinearGradient1"
          x1="0%"
          y1="0%"
          x2="0%"
          y2="100%"
          spreadMethod="pad"
        >
          <stop
            offset="0%"
            stop-color="yellow"
            stop-opacity="1"
          />
          <stop
            offset="100%"
            stop-color="red"
            stop-opacity="1"
          />
        </linearGradient>
        <path
          ref="thePath"
          class="thePath_css"
          fill-rule="evenodd"
          stroke-width="10.2px"
          stroke-linecap="butt"
          stroke-linejoin="miter"
          fill="none"
          style="stroke: black; stroke-dasharray: 0px, 1500px"
          d="M79.100,12.100 C63.375,12.502 62.559,61.113 79.100,61.100 C96.251,60.632 93.909,12.078 79.100,12.100 ZM138.100,72.100 L138.100,11.100 L134.100,11.100 L110.100,48.100 L110.100,52.100 L155.100,52.100 L138.100,52.100 M39.100,72.100 L39.100,11.100 L35.100,11.100 L11.100,48.100 L11.100,52.100 L56.100,52.100 L39.100,52.100 "
        />
      </svg>
    </div>
    <div class="text_outer_css">
      <div class="tip_css">当前访问了不存在的页面</div>
      <div
        class="to_home_css"
        @click="toRouter"
        >返回首页</div
      >
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { useRouter } from 'vue-router'

const $router = useRouter()

function toRouter() {
  $router.push({ name: 'Home' })
}

const thePath = ref()
onMounted(() => {
  setTimeout(() => {
    let asd = 172
    thePath.value.style.strokeDasharray = `${asd}px,1500px`
    thePath.value.style.stroke = `url(#myLinearGradient1)`
  }, 500)
})
</script>

<style scoped lang="scss">
.svg_outer_css {
  width: 300px;
  height: 200px;
  // background-color: aqua;
  margin: 30px auto;

  filter: drop-shadow(15px 30px 12px black);

  // animation: filterAnimation 2s 0s forwards;

  // @keyframes filterAnimation {
  //   0% {
  //     filter: drop-shadow(0px 0px 15px rgba(0, 0, 0, 0));
  //   }

  //   100% {
  //     filter: drop-shadow(15px 30px 15px black);
  //   }
  // }

  .thePath_css {
    transition: 2s;
  }
}

.text_outer_css {
  width: 300px;
  margin: 30px auto;
  transform-style: preserve-3d;
  perspective: 300px;

  $corsor-width: 2px;

  .tip_css {
    position: relative;
    width: $corsor-width;
    height: 1.875rem;
    font-size: 1.875rem;
    overflow: hidden;

    filter: drop-shadow(10px 10px 3px rgba(0, 0, 0, 0.586));

    animation: tipAnimation 1s 1s steps(11) forwards;

    @keyframes tipAnimation {
      0% {
        width: calc(0rem + $corsor-width);
      }

      100% {
        width: calc(20.625rem + $corsor-width);
      }
    }

    &::before {
      content: '';
      width: 100%;
      height: 100%;
      position: absolute;
      right: -1px;
      border-right: 3px solid black;
      animation: op01 0.75s infinite forwards;

      @keyframes op01 {
        0%,
        50% {
          opacity: 0;
        }

        100% {
          opacity: 1;
        }
      }
    }
  }

  .to_home_css {
    width: 9.375rem;
    margin-top: 0.9375rem;
    font-size: 2.1875rem;
    font-weight: bolder;
    background: linear-gradient(to right bottom, red, yellow);
    background-clip: text;
    -moz-background-clip: text;
    -webkit-background-clip: text;
    color: transparent;
    transform-origin: left bottom;
    transform: rotateY(116deg);
    opacity: 0;
    background-color: aliceblue;
    cursor: pointer;
    perspective: 300px;

    filter: drop-shadow(10px 10px 3px rgba(0, 0, 0, 0.586));

    animation: homeAnimation 0.5s 2s forwards;

    @keyframes homeAnimation {
      0% {
        opacity: 1;
        transform: rotateY(116deg);
        filter: drop-shadow(0px 0px 3px rgba(0, 0, 0, 0.586));
      }

      100% {
        opacity: 1;
        transform: rotateY(0deg);
        filter: drop-shadow(10px 10px 3px rgba(0, 0, 0, 0.586));
      }
    }
  }
}
</style>
